@model IEnumerable<NorthwindWeb.Models.Shipper>
<table id="shipperGrid"></table>
<div id="shipperGridPager"></div>
<div id="shipperGridSelectRow" title="Warning" style="display: none">
    <p>
        Please select a(n) Shipper!
    </p>
</div>

<script type="text/javascript">
    jQuery("#shipperGrid").jqGrid({
        url: '@Url.Action("shipperGridData")',
        datatype: "json",
        jsonReader: { repeatitems: false, id: "ShipperID" },
        colNames: ['ShipperID', 'CompanyName', 'Phone'],
        colModel: [
            { name: 'ShipperID', editable: true, sortable: false, hidden: true }, 
			{ name: 'CompanyName', editable: true, sortable: false, hidden: false }, 
			{ name: 'Phone', editable: true, sortable: false, hidden: false }			
],
        rowNum: 5,
        pager: '#shipperGridPager',
        width: '850',
        height: '15em'
    });

    jQuery("#shipperGrid").jqGrid('navGrid', '#shipperGridPager',
        { search: false, refresh: false },					   // General options
        { url: '@Url.Action("Edit")', closeAfterEdit: true },  // Edit options
        { url: '@Url.Action("Create")', closeAfterAdd: true }, // Add options
        { url: '@Url.Action("Delete")' }					   // Delete options                           
    );    
	
	function dateFmatter (cellvalue, options, rowObject){ 
    if (cellvalue != null){
        var d =  new Date(parseInt(cellvalue.substr(6))); 
        return 1 + d.getMonth() + '/' + d.getDate() + '/' + d.getFullYear();
    }
    return cellvalue;
	};
	
	function datePick (el){ 
	$(el).datepicker({ dateFormat: 'mm/dd/yy', changeMonth: true, changeYear: true, yearRange: 'c-50:c', showButtonPanel: true,  showAnim: 'slideDown' });
	};
</script>
